<template>
  <div class="article-detail">
    <h1>{{ article.title }}</h1>
    <div class="meta">
      <span>作者: {{ article.username }}</span>
      <span>发布时间: {{ formatDate(article.createdAt) }}</span>
    </div>
    <div class="content" v-html="article.content"></div>
    
    <div class="comments">
      <h3>评论</h3>
      <div v-if="authStore.user" class="comment-form">
        <textarea v-model="newComment" placeholder="发表你的评论"></textarea>
        <button @click="submitComment">提交评论</button>
      </div>
      
      <div v-for="comment in comments" :key="comment.id" class="comment">
        <div class="comment-meta">
          <strong>{{ comment.username }}</strong>
          <span>{{ formatDate(comment.createdAt) }}</span>
        </div>
        <p>{{ comment.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { getSingle, getList, add, TableName } from '@/api/index.js';
import { useAuthStore } from '@/stores/auth.js';

export default {
  setup() {
    const route = useRoute();
    const authStore = useAuthStore();
    const article = ref({});
    const comments = ref([]);
    const newComment = ref('');

    const articleId = computed(() => route.params.id);

    const loadData = async () => {
      // 获取文章详情
      const articleRes = await getSingle(articleId.value, TableName.Articles);
      if (articleRes?.data) article.value = articleRes.data;
      
      // 获取评论列表
      const commentsRes = await getList(TableName.Comments, articleId.value, '文章');
      if (commentsRes?.data) comments.value = commentsRes.data;
    };

    const submitComment = async () => {
      if (!newComment.value.trim()) return;
      
      const result = await add({
        content: newComment.value,
        articleid: articleId.value,
        userid: authStore.user.id,
        username: authStore.user.username,
        replyType: '文章',
        typeIndex: TableName.Comments
      });
      
      if (result?.errno === 0) {
        comments.value.unshift({
          ...result.data,
          content: newComment.value,
          username: authStore.user.username,
          createdAt: new Date().toISOString()
        });
        newComment.value = '';
      }
    };

    onMounted(loadData);

    return {
      article,
      comments,
      newComment,
      authStore,
      submitComment
    };
  }
};
</script>

<style scoped>
.article-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.meta {
  margin: 10px 0;
  color: #888;
  font-size: 0.9em;
}
.meta span {
  margin-right: 15px;
}
.content {
  margin: 20px 0;
  line-height: 1.6;
}
.comments {
  margin-top: 40px;
}
.comment-form {
  margin-bottom: 20px;
}
.comment-form textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
}
.comment-form button {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
.comment {
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.comment-meta {
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #666;
}
.comment-meta span {
  margin-left: 10px;
}
</style>